<template>
    <div style="width: 100%">
<!--        左上角的专业课程选择框-->
        <a-row style="box-shadow: -3px 2px 7px 2px rgba(0,0,0,0.3);">
            <a-row  style="margin-top: 5%">
                <a-col offset="3" :span="12">
                    
                    <a-cascader placeholder="请选择科目课程" :options=$store.state.exercise.col_cou_list :default-value="['1','ac8c18382d']" change-on-select @change="onCascaderChange" style="width: 100%"/>
                </a-col>
                <a-col :offset="2" span="4">
                    <a-button type="primary" icon="search" @click="searchCaps">
                        搜索章节目录和题目
                    </a-button>
                </a-col>
            </a-row>
            <a-row style="margin-top: 2%; margin-bottom: 5%"><!--显示题目数量的插槽-->
                <a-col :offset="3" :span="12">
                    <a-alert
                            type="info"
                            show-icon
                    ><span slot="message">
                        <a-row>
                            <a-col :span="12">
                                已选择节数：<span style="color: #1890ff">{{this.hasSelectItemSum}}</span>
                            </a-col>
                            <a-col :span="12">
                                题库内题量：<span style="color: #1890ff">{{this.hasSelectItemCountSum}}</span>
                            </a-col>
                        </a-row>
                    </span></a-alert>
                </a-col>
                <a-col :offset="2" span="2">
                    <a-button type="primary" icon="primary" @click="getPaper">
                        生成试卷<a-icon type="right" />
                    </a-button>
                </a-col>
            </a-row>
        </a-row>
<!--        左下角的章节显示框-->
        <a-row style="box-shadow: -3px 2px 7px 2px rgba(0,0,0,0.3); margin-top: 3%; height: 460px">
            <a-table :columns="columns" :data-source="$store.state.exercise.cap_list" :row-selection="rowSelection" :pagination="false" style="height:460px;overflow: auto"/>
        </a-row>
    </div>

</template>
<script>
    let that;
    const columns = [
        {//章节号在请求数据时自动生成，格式为：一级节.二级节.三级节
            title: '章节号',
            dataIndex: 'capNum',
            width: '35%',
            key: 'capNum',
            sorter: (a, b) => Number(a.capNum.replaceAll('.',''))-Number(b.capNum.replaceAll('.',''))
        },
        {
            title: '章节名',
            dataIndex: 'name',
            key: 'name',
            width: '45%',
        },
        {
            title: '题量',
            dataIndex: 'count',
            width: '20%',
            key: 'count',
        },
    ];

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            that.$store.state.exercise.question_type.forEach((item,index)=>{
                    const newItem = item;
                    newItem.max = 0;
                that.$store.state.exercise.question_type.splice(index, 1, newItem)
                }
            )
            selectedRows.forEach(item=>{
                that.$store.dispatch('exercise/setQuestionTypeCount',item.queTypeCount)
            })
            that.hasSelectItemSum = selectedRows.length;
            that.hasSelectItemCountSum = 0;
            that.$store.state.exercise.question_type.forEach(item=>
                that.hasSelectItemCountSum+=item.max
            )
            that.$store.state.exercise.getPaperInfo.chooseCapId=selectedRowKeys;
        },
        // onSelect: (record, selected, selectedRows) => {
        //     console.log(record, selected, selectedRows);
        // },
        // onSelectAll: (selected, selectedRows, changeRows) => {
        //     console.log(selected, selectedRows, changeRows);
        // },
        getCheckboxProps: record => ({
            props: {
                disabled: record.count===0, // Column configuration not to be checked
                name: record.name,
            }
        }),
    };
    export default {

        data() {
            that = this;
            return {
                //表格
                columns,
                rowSelection,
                test:'nimameile',
                cascaderItem:[],
                hasSelectItemSum:0, //已经选中几个
                hasSelectItemCountSum:0//已经选中的项共多少题
            };
        },
        methods: {
            onCascaderChange(value) {
                this.cascaderItem = value;
            },
            searchCaps(){
                console.log(this.cascaderItem)
                if(this.cascaderItem[1]===undefined)
                    this.$message.warning('请选择科目课程');
                else {
                    this.$store.dispatch('exercise/getCapList',this.cascaderItem[1]).then(
                        res=>{
                            if(res.code === 0){
                                this.$message.error(res.msg);
                            }
                        }
                    ).catch(()=>{
                        this.$message.error("网络异常")
                    })
                }
            },
            getPaper(){
                if(this.hasSelectItemSum>0)
                    this.$store.dispatch('exercise/getPaper').then(
                        res=>{
                            if(res.code === 0){
                                this.$message.error(res.msg);
                            } else if(res.code === 1){
                                this.$router.push('/space/exercise/problems')
                            }
                        }
                    ).catch(()=>{
                        this.$message.error("网络异常")
                    })
                else {
                    this.$message.warning('请选择章节');
                }
            }
        },
        mounted(){
            this.cascaderItem = ['1','ac8c18382d']
        },
        beforeCreate() { //初始获取学院和科目
            this.$store.dispatch('exercise/getCollage').then(//获取学院
                res=>{
                    if(res.code === 0){
                        this.$message.error(res.msg);
                    } else if(res.code===1){
                        //获取课程
                        this.$store.state.exercise.col_cou_list.forEach(item=>{
                            this.$store.dispatch('exercise/getCourse',item.value).then(
                                couRes=>{
                                    if(res.code === 0){
                                        this.$message.error(couRes.msg);
                                    }
                                }
                            )
                        })
                    }
                }
            ).catch(()=>{
                this.$message.error("网络异常")
            })
        }
    };
</script>
